<template>
	<div class="main-header" v-if="state.breadcrumbList.length > 0">

		<div class="main-header-top">
			<a @click="router.push('/')">
				<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/xcx/tab/Home.png" alt="">
			</a>
			<span>/</span>
			<a @click="router.push(state.breadcrumbList[0].path)">{{ state.breadcrumbList[0].meta.title }}</a>
			<span v-if="props.secondName">/</span>
			<a @click="router.push(props.secondUrl)">{{ props.secondName }}</a>
			<span v-if="props.thirdName">/</span>
			<a @click="router.push(props.thirdUrl)">{{ props.thirdName }}</a>
		</div>

		<p>{{ props.secondName ?? state.breadcrumbList[0].meta.title }}</p>

	</div>
</template>

<script setup>
import { reactive, computed, onMounted } from 'vue';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import other from '/@/utils/other';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useRoutesList } from '/@/stores/routesList';

// 定义变量内容
const stores = useRoutesList();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { routesList } = storeToRefs(stores);
const route = useRoute();
const router = useRouter();
const state = reactive({
	breadcrumbList: [],
});

const props = defineProps({
	secondUrl: {type: String, default: ''},
	secondName: {type: String, default: ''},
	thirdUrl: {type: String, default: ''},
	thirdName: {type: String, default: ''},
})

// 处理面包屑数据
const getBreadcrumbList = (arr) => {
	arr.forEach((item) => {
		state.routeSplit.forEach((v, k, arrs) => {
			if (state.routeSplitFirst === item.path) {
				state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
				state.breadcrumbList.push(item);
				state.routeSplitIndex++;
				if (item.children) getBreadcrumbList(item.children);
			}
		});
	});
};
// 当前路由字符串切割成数组，并删除第一项空内容
const initRouteSplit = (path) => {
	if (!themeConfig.value.isBreadcrumb) return false;
	state.breadcrumbList = [routesList.value[0]];
	state.routeSplit = path.split('/');
	state.routeSplit.shift();
	state.routeSplitFirst = `/${state.routeSplit[0]}`;
	state.routeSplitIndex = 1;
	getBreadcrumbList(routesList.value);
	if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
	// if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
	if (state.breadcrumbList.length > 1) {
		state.breadcrumbList.shift()
	}
};
// 页面加载时
onMounted(() => {
	initRouteSplit(route.path);
});
// 路由更新时
onBeforeRouteUpdate((to) => {
	initRouteSplit(to.path);
});
</script>

<style scoped>
@media screen and (max-width: 700px) {
	.main-header p {
		display: none;
	}
}
.main-header {
	width: 100%;
	padding: 10px 18px;
	color: #818496;
	background: #fff;
	box-shadow: inset 0px -1px 0px 0px #DADEE6;
	margin-top: 1px;
}
.main-header p {
	font-size: 20px;
	color: #21252E;
	margin-top: 10px;
}
.main-header-top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.main-header-top a {
	color: #818496;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	cursor: pointer;
}
.main-header-top span {
	width: 22px;
	text-align: center;
}
</style>